<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<body style=" height: 100%;width: 100%; position: absolute;">
<!-- 顶部导航 -->

<!-- navbanner begin-->
<header th:include="cultivateWeb/header :: header(true)"></header>
<style>
    a {
        cursor: pointer
    }
    #search-btn{
        width: 100px;
        height: 40px;
        position: relative;
        left: -1px;
    }
    #course{
        display: flex; flex-direction: row;flex-wrap: wrap;width: 100%;
    }
    #course li{
        float:none;margin: 10px;width: calc((100% / 4) - 20px);padding: 0; border: 0;    height: 303px;
    }
</style>
<main id="main">
<section  style="background-color: #f7f7f7;min-height: 575px; ">
<!--    搜索-->
    <div class="container main-md" style="display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background: #FFFFFF;">
        <div class="layui-input-group">
            <input type="text"  id="name"  placeholder="请输入课程名字" class="layui-input" style=" width: 500px;height: 40px">
            <div id="search-btn" lay-affix="clear" class="myblue layui-input-split layui-input-suffix layui-btn layui-btn-normal" >
                搜索
            </div>
        </div>
    </div>

    <!-- 全部课程 -------------------------------------------------------------- -->
    <div class="container main-md" style="background: #FFFFFF;margin-top: 10px;padding:20px;height: calc(100%- 100px)">
        <ul class="clear" id="course">
        </ul>

        <div id="page" class="page" style="margin-top: 20px;display: flex;
                            justify-content: center;
                            align-items: center;"></div>

    </div>

</section>
</main>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer">
</div>
<script type="text/javascript" src="/js/xlPaging.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script>

    //设置分页数据
    const mylist={
        sums:1,
        limit:12,
        page:1,
        number:1,
    }
    //页面数据
    const mypageData={}

    //查询点击事件
    $('#search-btn').click(()=>{
        getData()
    })
    //调接口
    const getData=()=>{
        if(mypageData.pageSign=='1'|| mypageData.pageSign=='2'){
            $.ajax({
                url: "/courses/getCourseList",
                type: 'POST',
                data:JSON.stringify( {
                    isDeleted: 0,
                    newType: mypageData.pageSign,//   1.精品课程2.自建课程
                    paging:0,
                    publicity:0,
                    state:0,
                    current:mylist.page,
                    size: mylist.limit,
                    name: $("#name").val(),

                }),
                contentType:"application/json",
                datatype:"json",
                success: function (res) {
                    if(res.code=='0'){
                        mylist.sums=res.data.total
                    }
                    if (res.data.pages == 0 || res.data.pages == '0') {
                        $("#course").html(`<div class="noData" style="font-size: 16px;    height: 300px;   width: 100%;   display: flex;
                                justify-content: center;  align-items: center;">未查询到课程信息 请更换名称后重试</div>`  );
                    } else {
                        var list = res.data.records;
                        var course = '';
                        list.forEach(function (item, index) {
                            course += `<li>
                                        <a href="/couInfo/couInfo?id=${item.id}&pageSign=${mypageData.pageSign}" style="width:100%">
                                        <div style=" position: relative;   width:100%; ">
                                         <img style="width: 100%; object-fit: none; border-radius: 10px 10px 0 0;" src="${item.introducePortrait}" alt="图片"/>
                                        </div>
                                        <div style="border: 1px solid #EFEFEF;border-top: 0;margin-top:0;padding: 10px;border-radius: 0 0 10px 10px;">
                                            <h1>${item.name}</h1>
                                         <h2 style="padding: 10px 0;border-bottom: 1px solid #EFEFEF;">
                                          ${item.createrName}
                                         </h2>
                                          <div style="margin: 10px 0;">${item.browseNum}人已学习</div>
                                   </div>
                                 </a>
                            </li>`
                        });
                        $("#course").html(course);

                    }
                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage
                        laypage.render({
                            elem: 'page',
                            count: mylist.sums,
                            limit: mylist.limit,
                            limits: [12, 50, 100,150],
                            curr:mylist.page,
                            layout: ['count', 'prev','limit', 'page', 'next', 'refresh', 'skip'],
                            jump: function(obj){
                                console.log('page点击',obj)
                                //调接口
                                mylist.page=obj.curr
                                mylist.limit=obj.limit
                                console.log('mylist.number',mylist.number)
                                if(mylist.number>1){
                                    mylist.number=1
                                    getData()
                                }else{
                                    mylist.number=2;
                                }


                            }
                        });
                    })
                }
            });
        }else{

            $.ajax({
                url: `/famousTeacher/list/${Number(mylist.page)}/${Number(mylist.limit)}`,
                type: 'GET',
                data:{
                    name: $("#name").val(),
                },
                async : false,
                success: function (res) {

                    if(res.code=='0'){
                        mylist.sums=res.data.total
                    }
                    console.log('=pageNumber:$("#pageSign").value==',mypageData.pageSign)
                    if (res.code=="1"||res.code==1) {
                        $("#course").html(`<div class="noData" style="font-size: 16px;    height: 300px;   width: 100%;   display: flex;
                                justify-content: center;  align-items: center;">${res.msg}</div>`);
                    } else {
                        var list = res.data.records;
                        var course = '';
                        list.forEach(function (item, index) {
                            course += `<li style="display: flex;  flex-direction: column;  justify-content: center;
                                                        align-items: center;    border-radius: 10px;float:none;margin: 10px 20px;
                                                        width: calc((100% / 4) - 40px);padding: 0;border: 1px solid #efefef;
                                                        padding-top:  calc(((100% / 4) - 210px) / 4);">

                                                        <div style="position: relative;">
                                                            <img style=" width: 170px; height: 225px;" src="${item.image}" alt="图片"/>

                                                        </div>
                                                        <div style="  display: flex;  margin: 15px 0; flex-direction: column;  align-items: center; justify-content: center;">
                                                            <h1 style="font-size: 20px">${item.name}</h1>
                                                          <div style="margin: 10px 0;">${item.position}</div>
                                                   </div>
                                            </li>`

                        });
                        $("#course").html(course);
                        // page(1, res.data.pages, name, profileId);
                    }

                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage
                        laypage.render({
                            elem: 'page',
                            count: mylist.sums,
                            limit: mylist.limit,
                            limits: [12, 50, 100,150],
                            curr:mylist.page,
                            layout: ['count', 'prev','limit', 'page', 'next', 'refresh', 'skip'],
                            jump: function(obj){
                                console.log('page点击',obj)
                                //调接口
                                mylist.page=obj.curr
                                mylist.limit=obj.limit
                                console.log('mylist.number',mylist.number)
                                if(mylist.number>1){
                                    mylist.number=1
                                    getData()
                                }else{
                                    mylist.number=2;
                                }


                            }
                        });
                    })
                }
            });

        }

    }

//初始化设置
    $(function () {
        location.href.split('?')[1].split('&').forEach((item)=>{
            mypageData[item.split("=")[0]]=item.split("=")[1]
        })
        $("#name").attr("value",mypageData.name?mypageData.name:'')
        $("#name").attr("placeholder",(mypageData.pageSign=='1'|| mypageData.pageSign=='2')?'请输入课程名称':'请输入老师姓名')

        var userName = window.localStorage.getItem("userName");
        var unreadNum = window.localStorage.getItem("unreadNum0");
        if (userName != "" && userName != null) {
            $("#user").text(userName);
            $('.yes').css("display", "inline");
            if (unreadNum != 0 && unreadNum != null && unreadNum != '') {
                $(".bubble").css("display", "inline");
                $(".bubble").html(unreadNum)
            }
        }
        //课程数据
        getData()
    });



</script>

</body>
</html>